/// WEB AUDIO FAB
/// Styles mainly pulled from existing styles and refactored
/// with new system elements
web-audio-fab {
  border-radius: 50%;
  box-shadow: 0px 8px 12px 6px rgba(60, 64, 67, 0.15),
    0px 4px 4px rgba(60, 64, 67, 0.3);
  display: block;
  height: 56px;
  width: 56px;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: $global-gutter;
  bottom: $global-gutter;
  transition: opacity $global-transition-bounce;
  z-index: 1;

  &[showing] {
    opacity: 1;
    pointer-events: auto;
  }
}

.web-audio-fab {
  &__button {
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    margin: 0;
    border: 0;
  }

  &__thumbnail {
    border-radius: 50%;
    display: block;
  }

  &__equalizer-container {
    align-items: center;
    background-color: #fff;
    border-radius: 50%;
    bottom: 0;
    box-shadow: 0px 8px 12px 6px rgba(60, 64, 67, 0.15),
      0px 4px 4px rgba(60, 64, 67, 0.3);
    display: flex;
    height: 24px;
    justify-content: center;
    position: absolute;
    right: 0;
    width: 24px;
  }

  &__equalizer {
    fill: get-color('core-primary');

    &-left {
      animation: equalizer-morph 1s linear 0.1s infinite;
      transform-origin: bottom;
    }

    &-middle {
      animation: equalizer-morph 1s linear 0.2s infinite;
      transform-origin: bottom;
    }

    &-right {
      animation: equalizer-morph 1s linear 0.4s infinite;
      transform-origin: bottom;
    }
  }
}

// Shout out to Hope Armstrong for the original codepen
// https://blog.logrocket.com/animating-svg-with-css-83e8e27d739c/
// https://codepen.io/hopearmstrong/pen/VNYoNq

@keyframes equalizer-morph {
  0% {
    transform: scaleY(1);
  }

  25% {
    transform: scaleY(0.3);
  }

  50% {
    transform: scaleY(0.7);
  }

  75% {
    transform: scaleY(0.15);
  }
}

web-audio-fab:not([playing]) .web-audio-fab__equalizer {
  &-left {
    animation: none;
    transform: scaleY(0.8);
  }

  &-middle {
    animation: none;
    transform: scaleY(1);
  }

  &-right {
    animation: none;
    transform: scaleY(0.6);
  }
}
